<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="localContentVal.content" @ready="MyCustomUploadAdapterPlugin" :config="editorConfig">
        </ckeditor>
    </div>
</template>

<script>
import { toRef } from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import MyUploadAdapter from '@/api/media/ckeditoruploadimage'
export default {
    name: "",
    components: {
        ckeditor: CKEditor.component
    },
    props: {
        contentVal: {
            type: Object
        }
    },
    setup(props) {
        const localContentVal = toRef(props, 'contentVal')
        console.log(localContentVal.value)
        const MyCustomUploadAdapterPlugin = (editor) => {
            // 自定义上传图片插件
            editor.plugins.get("FileRepository").createUploadAdapter = loader => {
                return new MyUploadAdapter(loader);
            };
        }
        return {
            editor: ClassicEditor,
            localContentVal,
            editorConfig: {
                // The configuration of the editor.
                extraPlugins: [ MyCustomUploadAdapterPlugin ],
            },
            MyCustomUploadAdapterPlugin
        }
    }
}
</script>

<style lang="scss"></style>